@use './common/var'as *;

:root {
  @each $name in map-keys($dis-map) {
    --dis-#{$name}: #{map-get($dis-map, $name)};
  }

  --el-font-weight-primary: 400;
}

@each $name in map-keys($dis-map) {
  $value: map-get($dis-map, $name);

  .mt-#{$name} {
    margin-top: $value;
  }

  .mr-#{$name} {
    margin-right: $value;
  }

  .mb-#{$name} {
    margin-bottom: $value;
  }

  .ml-#{$name} {
    margin-left: $value;
  }

  .margin-#{$name} {
    margin: $value;
  }

  .margin-h-#{$name} {
    margin-left: $value;
    margin-right: $value;
  }

  .margin-v-#{$name} {
    margin-top: $value;
    margin-bottom: $value;
  }

  .pt-#{$name} {
    padding-top: $value;
  }

  .pr-#{$name} {
    padding-right: $value;
  }

  .pb-#{$name} {
    padding-bottom: $value;
  }

  .pl-#{$name} {
    padding-left: $value;
  }

  .padding-#{$name} {
    padding: $value;
  }

  .padding-h-#{$name} {
    padding-left: $value;
    padding-right: $value;
  }

  .padding-v-#{$name} {
    padding-top: $value;
    padding-bottom: $value;
  }
}

//@each $name in map-keys($color-map) {
//  $value: map-get($color-map, $name);
//
//  .c-#{$name} {
//    color: $value !important;
//  }
//}

.align-l {
  text-align: left;
}

.align-c {
  text-align: center;
}

.align-r {
  text-align: right;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.clearfix {
  &:after {
    content: '';
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
  }
}

.ellipse {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

//.text-c-primary {
//  color: getElVar(text-color-primary) !important;
//}
//
//.text-c-regular {
//  color: getElVar(text-color-regular) !important;
//}
//
//.text-c-secondary {
//  color: getElVar(text-color-secondary) !important;
//}
//
//.text-c-placeholder {
//  color: getElVar(text-color-placeholder) !important;
//}
//
//.text-c-disabled {
//  color: getElVar(text-color-disabled) !important;
//}
